<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
	</head>
	<body>
		<div id="app" class="panel panel-default">
			<h3>添加书籍</h3>
			<div id="">
				书名<input style="width: 50px;" type="text" name="" id="" value="" v-model="name" />
				价格<input style="width: 50px;" type="text" name="" id="" value="" v-model="price" />
				日期<input style="width: 150px;" type="date" name="" id="" value="" v-model="tdate" />
				数量<input style="width: 50px;" type="text" name="" id="" value="" v-model="count" />
				<button type="button" @click="btn_add()">添加</button>
				<input style="margin-left: 15%;" type="text" name="" id="" value="" v-model="searchname" /><button type="button" >搜索</button>
			</div>
			<br><br>
			
		  <table border="" cellspacing="" cellpadding="" class="table table-hover">
			  <thead>
				  <th>编号</th>
				  <th>书名</th>
				  <th>价格</th>
				  <th>日期</th>
				  <th>数量</th>
				  <th>操作</th>
			  </thead>
			  <tbody v-for="(book,index) in btn_seach(searchname)">
				  <td>{{book.id}}</td>
				  <td>{{book.name}}</td>
				  <td>{{book.price}}</td>
				  <td>{{book.tdate}}</td>
				  <td>{{book.count}}</td>
					  <td>
						  <button type="button" @click='isShow = true'>编辑</button>
						  <button type="button" @click="btn_sel(index)" >删除</button>
					  </td>
			  </tbody>
		  </table>
		</div>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
			  el: '#app',
			  data: {
				  searchname:"",
				  count:"",
				  name:"",
				  price:"",
				  tdate:"",
				books:
				[
				{id: 1, name: 'Java从入门到放弃', price: 80, tdate: '2020-07-01', count: 1, account: "hehe"},
				{id: 2, name: 'Vue从入门到放弃', price: 90, tdate: '2020-07-02', count: 1, account: "haha"},
				{id: 3, name: 'Mysql从入门到放弃', price: 100.01, tdate: '2020-07-03', count: 1, account: "hehe"},
				{id: 4, name: '啥都从入门到放弃', price: 70.00, tdate: '2020-07-04', count: 1, account: "haha"},	
				],
				isShow:false,
				message:"red",
			  },
			  methods: {
				  //添加
				  btn_add:function(){
					  console.log(111);
					  if(this.name.length == 0){
						  alert("name不能为空")
					  }else{
						  let data = {id:this.books.length+1,name:this.name,price:this.price,tdate:this.tdate,count:this.count}
						  this.books.push(data)
						  this.name = this.price = this.tdate = this.count = ""
					  }
				  },
				  //删除
				  btn_sel:function (index){
					  console.log(111);
					  this.books.splice(index,1);
				  },
				  // 查找
				  btn_seach:function (searchname){
					  console.log(this.searchname)
					  let newlist = [];
					  this.books.forEach(item=>{
						  if(item.name.indexOf(this.searchname) != -1){
							  newlist.push(item)
						  }
					  })
					  console.log(newlist)
					  return newlist
				  }
			    },
			})
		</script>
	</body>
</html>
